﻿@section featured {

}

<!-- Main content -->
<section role="main" id="main">

    <noscript class="message black-gradient simpler">Seu navegador não tem suporte a Javascript! Algumas funcionalidades podem não funcionar corretamente...</noscript>

    <hgroup id="main-title" class="thin">
        <h1>Dashboard</h1>
        <h2>nov <strong>10</strong></h2>
    </hgroup>

    <div class="dashboard">

        <div class="columns">

            <div class="nine-columns twelve-columns-mobile" id="demo-chart">
                <!-- This div will hold the chart generated in the footer -->
            </div>

            <div class="three-columns twelve-columns-mobile new-row-mobile">
                <ul class="stats split-on-mobile">
                    <li><a href="#">
                        <strong>21</strong> new
                            <br>
                        accounts
                    </a></li>
                    <li><a href="#">
                        <strong>15</strong> referred new
                            <br>
                        accounts
                    </a></li>
                    <li>
                        <strong>5</strong> new
                            <br>
                        items
                    </li>
                    <li>
                        <strong>235</strong> new
                            <br>
                        comments
                    </li>
                </ul>
            </div>

        </div>

    </div>

    <div class="with-padding">

        <div class="columns">

            <div class="four-columns six-columns-tablet twelve-columns-mobile">

                <h2 class="relative thin">New users
						<span class="info-spot">
                            <span class="icon-info-round"></span>
                            <span class="info-bubble">This is an information bubble to help the user.
                            </span>
                        </span>
                    <span class="button-group absolute-right">
                        <a href="javascript:openModal()" title="Add user" class="button icon-plus-round">Add</a>
                        <a href="javascript:openLoadingModal()" title="Reload list" class="button icon-redo"></a>
                    </span>
                </h2>

                <ul class="list spaced">

                    <li>
                        <a href="#" class="list-link icon-user" title="Click to edit">
                            <span class="meter orange-gradient"></span>
                            <span class="meter orange-gradient"></span>
                            <span class="meter"></span>
                            <span class="meter"></span>

                            <strong>John</strong> Doe
                        </a>
                        <div class="button-group absolute-right compact show-on-parent-hover">
                            <a href="#" class="button icon-pencil">Edit</a>
                            <a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
                            <a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
                        </div>
                    </li>

                    <li>
                        <a href="#" class="list-link icon-user" title="Click to edit">
                            <span class="meter red-gradient"></span>
                            <span class="meter"></span>
                            <span class="meter"></span>
                            <span class="meter"></span>

                            <strong>John</strong> Krazinski
                        </a>
                        <div class="button-group absolute-right compact show-on-parent-hover">
                            <a href="#" class="button icon-pencil">Edit</a>
                            <a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
                            <a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
                        </div>
                    </li>

                    <li>
                        <a href="#" class="list-link icon-user" title="Click to edit">
                            <span class="meter blue-gradient"></span>
                            <span class="meter blue-gradient"></span>
                            <span class="meter blue-gradient"></span>
                            <span class="meter"></span>

                            <strong>John</strong>athan Bell
                        </a>
                        <div class="button-group absolute-right compact show-on-parent-hover">
                            <a href="#" class="button icon-pencil">Edit</a>
                            <a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
                            <a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
                        </div>
                    </li>

                    <li>
                        <a href="#" class="list-link icon-user" title="Click to edit">
                            <span class="meter blue-gradient"></span>
                            <span class="meter blue-gradient"></span>
                            <span class="meter blue-gradient"></span>
                            <span class="meter"></span>

                            <strong>John</strong> Debogorsky
                        </a>
                        <div class="button-group absolute-right compact show-on-parent-hover">
                            <a href="#" class="button icon-pencil">Edit</a>
                            <a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
                            <a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
                        </div>
                    </li>

                    <li>
                        <a href="#" class="list-link icon-user" title="Click to edit">
                            <span class="meter orange-gradient"></span>
                            <span class="meter orange-gradient"></span>
                            <span class="meter"></span>
                            <span class="meter"></span>

                            <strong>John</strong>ny Halliday
                        </a>
                        <div class="button-group absolute-right compact show-on-parent-hover">
                            <a href="#" class="button icon-pencil">Edit</a>
                            <a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
                            <a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
                        </div>
                    </li>

                    <li>
                        <a href="#" class="list-link icon-user" title="Click to edit">
                            <span class="meter green-gradient"></span>
                            <span class="meter green-gradient"></span>
                            <span class="meter green-gradient"></span>
                            <span class="meter green-gradient"></span>

                            <strong>John</strong> Hutter
                        </a>
                        <div class="button-group absolute-right compact show-on-parent-hover">
                            <a href="#" class="button icon-pencil">Edit</a>
                            <a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
                            <a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
                        </div>
                    </li>

                    <li>
                        <a href="#" class="list-link icon-user" title="Click to edit">
                            <span class="meter red-gradient"></span>
                            <span class="meter"></span>
                            <span class="meter"></span>
                            <span class="meter"></span>

                            <strong>John</strong> Zert
                        </a>
                        <div class="button-group absolute-right compact show-on-parent-hover">
                            <a href="#" class="button icon-pencil">Edit</a>
                            <a href="#" class="button icon-gear with-tooltip" title="Other actions"></a>
                            <a href="#" class="button icon-trash with-tooltip confirm" title="Delete"></a>
                        </div>
                    </li>

                </ul>

            </div>

            <div class="new-row-mobile four-columns six-columns-tablet twelve-columns-mobile">

                <div class="block large-margin-bottom">

                    <div class="block-title">
                        <h3>Next events</h3>
                        <span class="ribbon"><span class="ribbon-inner">3 new</span></span>
                    </div>

                    <ul class="events">

                        <li>
                            <span class="event-date orange">8</span>
                            <a href="#" class="event-description">
                                <h4>Event title</h4>
                                <p>Event description text</p>
                            </a>
                        </li>

                        <li>
                            <span class="event-date">15</span>
                            <span class="event-description">
                                <h4>Another event</h4>
                                <p>Other event description text, other event description text</p>
                            </span>
                            <span class="ribbon tiny"><span class="ribbon-inner red-gradient">High</span></span>
                        </li>

                        <li>
                            <span class="event-date with-month">8 <span class="event-month">April</span>
                            </span>
                            <h4>Next month event</h4>
                            <p>Another description text</p>
                        </li>

                    </ul>

                </div>

                <div class="facts clearfix">

                    <div class="fact">
                        <span class="fact-value">50 <span class="fact-unit">Min</span>
                        </span>
                        Average time per session<br>
                        <span class="fact-progress red">-5% ▼</span>
                    </div>

                    <div class="fact">
                        <span class="fact-value">25 <span class="fact-unit">%</span>
                        </span>
                        Traffic growth over 30 days<br>
                        <span class="fact-progress green">+7.1% ▲</span>
                    </div>

                </div>

                <div class="button-height wrapped align-right">
                    <span class="float-left mid-margin-left">Want some modals?</span>
                    <span class="button-group">
                        <a href="javascript:openAlert();" class="button">Alert</a>
                        <a href="javascript:openPrompt();" class="button">Prompt</a>
                        <a href="javascript:openConfirm();" class="button">Confirm</a>
                    </span>
                </div>

            </div>

            <div class="new-row-tablet four-columns twelve-columns-tablet">

                <div class="block">

                    <div class="block-title">
                        <h3 id="agenda-day">Tuesday</h3>
                        <div class="button-group absolute-right compact">
                            <a href="#" class="button" id="agenda-previous"><span class="icon-left-fat"></span></a>
                            <a href="#" class="button" id="agenda-today">Today</a>
                            <a href="#" class="button" id="agenda-next"><span class="icon-right-fat"></span></a>
                        </div>
                    </div>

                    <div class="agenda" id="agenda">

                        <!-- Time markers -->
                        <ul class="agenda-time">
                            <li class="from-7 to-8"><span>7 AM</span></li>
                            <li class="from-8 to-9"><span>8 AM</span></li>
                            <li class="from-9 to-10"><span>9 AM</span></li>
                            <li class="from-10 to-11"><span>10 AM</span></li>
                            <li class="from-11 to-12"><span>11 AM</span></li>
                            <li class="from-12 to-13 blue"><span>NOON</span></li>
                            <li class="from-13 to-14"><span>1 PM</span></li>
                            <li class="from-14 to-15"><span>2 PM</span></li>
                            <li class="from-15 to-16"><span>3 PM</span></li>
                            <li class="from-16 to-17"><span>4 PM</span></li>
                            <li class="from-17 to-18"><span>5 PM</span></li>
                            <li class="from-18 to-19"><span>6 PM</span></li>
                            <li class="from-19 to-20"><span>7 PM</span></li>
                            <li class="at-20"><span>8 PM</span></li>
                        </ul>

                        <!-- Columns wrapper -->
                        <div class="agenda-wrapper">

                            <!-- Events list -->
                            <div class="agenda-events agenda-day1">

                                <span class="agenda-event anthracite-gradient from-16 to-17-30">
                                    <time>4 PM - 5:30 PM</time>
                                    Event description
                                </span>

                            </div>

                            <!-- Events list -->
                            <div class="agenda-events agenda-day2">

                                <div class="dark-stripes from-12 to-14"></div>

                                <a href="#" class="agenda-event from-8 to-11">
                                    <time>8 AM - 11 AM</time>
                                    Event description
                                </a>

                                <span class="agenda-event from-16-30 to-17-30">
                                    <time>4:30 PM - 5:30 PM</time>
                                    Event description
                                </span>

                            </div>

                            <!-- Events list -->
                            <div class="agenda-events agenda-day3">

                                <div class="dark-stripes from-12 to-18"></div>

                                <a href="#" class="agenda-event from-7 to-9">
                                    <time>7 AM - 9 AM</time>
                                    Event description
										<span class="ribbon tiny"><span class="ribbon-inner orange-gradient">Priv</span></span>
                                </a>

                                <span class="agenda-event from-10 to-11-30 event-1-on-2">
                                    <time>10 AM - 11:30 AM</time>
                                    Event description
                                </span>

                                <span class="agenda-event from-11 to-13 event-2-on-2 anthracite-gradient">
                                    <time>11 AM - 1 PM</time>
                                    Event description
                                </span>

                                <div class="agenda-now" style="top: 63.75%"><span>03:23</span></div>

                            </div>

                            <!-- Events list -->
                            <div class="agenda-events agenda-day4">

                                <div class="dark-stripes from-12 to-14"></div>

                                <a href="#" class="agenda-event from-9 to-10">
                                    <time>9 AM - 10 AM</time>
                                    Event description
                                </a>

                                <span class="agenda-event from-16 to-17-30 event-1-on-2">
                                    <time>4 PM - 5:30 PM</time>
                                    Event description
                                </span>

                                <span class="agenda-event from-17 to-19-30 event-2-on-2 blue-gradient">
                                    <time>5 PM - 7:30 PM</time>
                                    Event description
                                </span>

                            </div>

                            <!-- Events list -->
                            <div class="agenda-events agenda-day5">

                                <div class="dark-stripes from-12 to-14"></div>

                                <a href="#" class="agenda-event from-8 to-9">
                                    <time>8 AM - 9 AM</time>
                                    Event description
                                </a>

                                <span class="agenda-event from-11 to-13 anthracite-gradient">
                                    <time>11 AM - 1 PM</time>
                                    Event description
                                </span>

                                <span class="agenda-event from-17 to-19-30 blue-gradient">
                                    <time>5 PM - 7:30 PM</time>
                                    Event description
                                </span>

                            </div>

                            <!-- Events list -->
                            <div class="agenda-events agenda-day6">

                                <div class="dark-stripes from-12 to-14"></div>

                                <span class="agenda-event from-10 to-13 anthracite-gradient">
                                    <time>10 AM - 1 PM</time>
                                    Event description
                                </span>

                                <span class="agenda-event from-16 to-18-30">
                                    <time>4 PM - 6:30 PM</time>
                                    Event description
                                </span>

                            </div>

                            <!-- Events list -->
                            <div class="agenda-events agenda-day7"></div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>
<!-- End main content -->
